<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
		<canvas id ="canvas" width="500" height="500" style="border:1px solid #000"></canvas>

</body>
</html>

<script type="text/javascript">
	var canvas = document.getElementById('canvas');
	var context = canvas.getContext('2d');
	function createStar(context) {

		var dx =50; /* 圆心X坐标*/
		var dy =50; /*圆心Y坐标*/
		var s = 50; /*# 圆的半径*/
		context.beginPath();
		context.fillStyle = "rgb(100,255,100)";
		var dig = 2*Math.PI/5*2;
		for (var i = 0; i < 5; i++) {
			var x = Math.sin(i*dig);

			var y = Math.cos(i*dig);
			context.lineTo(dx+s*x,dy+s*y); /*划线的终点*/
		}
		context.fill();

		// body...
	}

	//createStar(context)
	//context.translate(100,100);
	//createStar(context)//
	context.shadowOffsetX=20;
	context.shadowOffsetY=10;
	context.shadowBlur=3.5;
	context.shadowColor = 'rgb(100,100,100,0.5)';
	for (var i = 0; i < 3; i++) {
		context.translate(100,100);
		createStar(context)
		
	}



	</script>